<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <link rel="stylesheet" href="http://www.h5al.cn/js/animate.css">
    
    <style type="text/css">
        html,body{width:100%;height:100%;overflow:hidden;}

        .box{background-color: red;}                  /* 刚开始是红色，看不到 */
        .fade-enter{background-color: blue;}          /* 一瞬间是蓝色 */
        .fade-enter-active{transition: all 2s linear;}  /* 过度两秒 */
        .fade-enter-to{background-color: yellow;}     /* 由蓝色渐渐变为黄色 */
        /* 当动画结束后 会去掉所有样式 */
        .fade-leave{background-color: purple;}  /* 这行leave 没有实际意义 */
        .fade-leave-active{transition: all 2s linear;}  /* 隐藏时过度两秒 */
        .fade-leave-to{background-color: blue;}       /* 由黄色渐渐变为蓝色 */

        img{width:200px;height:200px;}
        .cart{position:absolute;right:0;bottom:0;background:red;width:50px;height:50px;}
        .animate{position:absolute;width:200px;height:200px;transition:1s linear}
        li{background-color: blue;color:#fff;line-height:35px;width:200px;}
    </style>
</head>
<body>
    <div id="app">
        <!-- css动画，vue中的动画（当dom显示或者隐藏时 vue可以管理动画）v-for v-if v-show -->
        <transition name="fade">
            <div style="width:100px;height:100px;" class="box" v-show="isShow"></div>
        </transition>
        <button @click="change">点我css</button>

        <!-- js动画，对应methods的方法 -->
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
        >
        <!-- 离开的方法@before-leave="" @leave="" @after-leave="" -->
            <div style="width:100px;height:100px;" class="box" v-show="isShow1"></div>
        </transition>
        <button @click="change1">点我js</button>

        <hr>
        <!-- 购物车 {0:div,1:div,3:div} this.$refs -->
        <div v-for="(p,index) in products" ref="lists">
            <img :src="p">
            <button @click="addCart(index)">添加</button>
        </div>
        <transition @enter="boxEnter" @after-enter="boxAfterEnter">
            <div class="animate" v-if="isShow2"></div>
        </transition>
        <div class="cart" ref="cart"></div>

        <hr>
        <input type="text" v-model="content">
        <transition-group 
            enter-active-class="animated bounceInLeft"
            leave-active-class="animated bounceOutRight"
        >
            <li v-for="item in computedArr" :key="item">{{item}}</li>
        </transition-group>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    isShow:false,
                    isShow1:false,

                    isShow2:false,  //默认控制动画的属性
                    currentIndex:-1,//当前点击的是谁
                    products:[
                        "https://img0.baidu.com/it/u=2147345492,1469492664&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734714000&t=b03c0e4ab4ba085de1a0d61e77971d7a",
                        "https://img2.baidu.com/it/u=3343374519,3370257561&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734714000&t=0b3523949d2ab31f581b23f306f5e6c1"
                    ],

                    content:'',
                    arrs:['abc','bcd','def','yyy','zzz']
                }
            },
            computed:{
                computedArr(){
                    return this.arrs.filter(item=>item.includes(this.content));
                }
            },
            methods:{
                beforeEnter(el){//这个是没有效果的
                    el.style.background="yellow"
                },
                enter(el,done){
                    //动画成功之后要调用done，否则不走afterEnter了
                    //配合velocity库做动画http://www.julian.com/research/velocity/build/velocity.min.js
                    //https://blog.csdn.net/u011551941/article/details/51461996
                    el.style.background="blue"
                    setTimeout(()=>{
                        done();
                    },1000)
                },
                afterEnter(el){
                    el.style.background="pink"
                },
                change(){
                    this.isShow = !this.isShow
                },
                change1(){
                    this.isShow1 = !this.isShow1
                },

                
                boxEnter(el,done){
                    let div = this.$refs.lists[this.currentIndex];
                    let {x,y} = div.getBoundingClientRect();//获取当前图片坐标
                    el.style.left = x + 'px';
                    el.style.top = y + 'px';
                    el.style.background = `url(${this.products[this.currentIndex]})`;
                    el.style.backgroundSize = "100% 100%";

                    let {x:cartX,y:cartY} = this.$refs.cart.getBoundingClientRect();//获取右下角坐标
                    el.style.transform = `translate3d(${cartX-x-50}px,${cartY-y-50}px,0) scale(0,0)`;//动画效果
                    el.addEventListener('transitionend',done);//监听结束才调用done
                },
                boxAfterEnter(el){
                    this.isShow2 = false
                },
                addCart(index){
                    this.isShow2 = true;
                    this.currentIndex = index;
                }
            }
        })
    </script>

</body>
</html>